import { Component } from 'react';
import { View } from '@tarojs/components';
import { AtButton } from 'taro-ui';
import Taro from '@tarojs/taro';
import EmptyContent from '@/components/EmptyContent';
import successIcon from '@/assets/images/appointment/success.png';
import failIcon from '@/assets/images/appointment/fail.png';
import './index.scss';

export default class Index extends Component {
  state = {
    result: '1',
    orderCode: '',
    serviceType: '',
  };
  componentDidMount = async () => {
    const querys = Taro.getCurrentInstance().router?.params;
    if (querys) {
      this.setState({
        result: querys.res,
        serviceType: querys.serviceType,
        orderCode: querys.orderCode,
      });
    }
  };

  toOrderDetail = () => {
    const { orderCode } = this.state;
    Taro.redirectTo({
      url: `/subPages/order/detail/index?type=2&orderCode=${orderCode}`,
    });
  };

  render() {
    const { result, serviceType } = this.state;
    return (
      <View className="appointment-result">
        {result === '1' ? (
          <View>
            <EmptyContent image={successIcon} title="预约成功" />
            <View className="desc">{serviceType === '2' ? '到店凭手机号享受服务' : '请等待服务人员上门服务'}</View>
            <AtButton className="view-detail" type="secondary" onClick={this.toOrderDetail}>
              查看预约详情
            </AtButton>
          </View>
        ) : result === '0' ? (
          <View>
            <EmptyContent image={failIcon} title="预约失败" />
            <View className="desc">请到个人中心-我的订单完成支付</View>
            <AtButton className="view-detail" type="secondary" onClick={this.toOrderDetail}>
              查看订单详情
            </AtButton>
          </View>
        ) : (
          <View>
            <EmptyContent image={failIcon} title="预约失败" />
            <View className="desc">系统繁忙，订单生成失败</View>
          </View>
        )}
      </View>
    );
  }
}
